import { useState, useEffect, useContext } from 'react';
import { NavBar, List, Space, Image } from 'antd-mobile';
import { AddCircleOutline } from 'antd-mobile-icons';
import { useHistory } from 'react-router-dom';

import { MySdkStoreContext } from '../../../context';

import './style.scss';

export default function() {
  const history = useHistory();
  const mySdkStore = useContext(MySdkStoreContext);
  const [tags, setTags] = useState([]);

  useEffect(async () => {
    const res = await mySdkStore.sdk.queryFavoriteTags();
    setTags(res);
  }, []);

  return (<div className="collectionListPage">
    <NavBar onBack={() => history.goBack()} style={{ background: '#fff', border: 'none' }}>我的收藏</NavBar>
    <List style={{ '--border-top': 0, '--border-bottom': 0, '--border-inner': 0, marginTop: 12 }}>
      <List.Item>
        <a onClick={() => history.push({ pathname: '/modifyCollection/0' })}><AddCircleOutline style={{ marginRight: 12, fontSize: 20 }} /> 新建标签</a>
      </List.Item>
    </List>
    <List header={`共有${tags.length}个标签`} style={{ '--border-top': 0, '--border-bottom': 0, marginTop: 12 }}>
      {tags.map(tag =>
        <List.Item key={tag.code} onClick={() => history.push({ pathname: `/collectionFold/${tag.code}/${encodeURI(tag.name)}` })}>
          { tag.name }
        </List.Item>
      )}
    </List>
  </div>)
}